<template>
  <view class="page-body">
    <div class="page-item">
      <div
        v-for="goods in order.goods_list"
        :key="goods.goods_id"
        class="goods flex"
      >
        <image :src="goods.pic" class="goods-img" mode="aspectFill"></image>
        <div class="flex-w-1">
          <div class="font-w-600 flex-y-center u-m-b-14">
            <div class="goods-name flex-w-1 u-line-1">
              {{ goods.goods_name }}
            </div>
          </div>

          <div class="flex-y-center">
            <div class="flex-w-1">
              <div class="desc">{{ goods.worker_goods_ext_desc }}</div>
            </div>
          </div>

          <div class="price u-font-24">
            <text class="price-color font-w-600">
              ¥
              <text class="u-font-36">{{
                $utils.priceFilter(goods.total_price)[0]
              }}</text>
              {{ $utils.priceFilter(order.total_price)[1] }}
            </text>

            <!-- <text class="font-del color-999 u-m-l-20"> ¥39.99 </text> -->
          </div>
        </div>
      </div>
    </div>

    <div v-if="title == '订单加钟'" class="page-item" style="padding: 0 24rpx">
      <div class="flex-y-center form-item border-b">
        <div class="font-w-600 u-m-r-60">加钟方式</div>
        <div
          @click="order.goods_list.length == 1 && (showPicker = true)"
          class="flex-y-center flex-w-1"
        >
          <div class="flex-w-1 color-999">{{ typeText }}</div>
          <div class="iconfont icon-arrow-right u-font-24"></div>
        </div>
      </div>
      <u-picker
        mode="selector"
        v-model="showPicker"
        :range="typeList"
        range-key="name"
        @cancel="showPicker = false"
        @confirm="pickerConfirm"
      ></u-picker>
      <div class="flex-y-center form-item border-b">
        <div class="font-w-600 u-m-r-60">订单金额</div>
        <div class="flex-y-center flex-w-1">
          <div class="flex-w-1 color-999">
            <u-input v-model="val" :placeholder="`请输入${typeText}`"></u-input>
          </div>
        </div>
      </div>
    </div>

    <div v-if="title == '订单尾款'" class="page-item" style="padding: 0 24rpx">
      <div class="flex-y-center form-item border-b">
        <div class="font-w-600 u-m-r-60">尾款金额</div>
        <div class="flex-y-center flex-w-1">
          <div class="flex-w-1 color-999">
            <u-input v-model="val" :placeholder="`请输入尾款金额`"></u-input>
          </div>
        </div>
      </div>
    </div>

    <div @click="submit" class="submit">
      {{ title == "订单尾款" ? "确认尾款" : "确认加钟" }}
    </div>
  </view>
</template>
<script>
import { orderList, orderFinishpay, orderAddTime } from "@/api/service-home";
export default {
  data() {
    return {
      order: "",
      val: "",
      title: "",
      typeList: [
        {
          id: 1,
          name: "订单金额",
        },
        {
          id: 2,
          name: "商品数量",
        },
      ],
      type: 1,
      showPicker: false,
    };
  },
  computed: {
    typeText() {
      let typeObj = this.typeList.find((item) => item.id == this.type);
      return typeObj.name;
    },
  },
  onLoad(params) {
    this.title = params.title;
    uni.setNavigationBarTitle({
      title: params.title,
    });
    this.order_id = params.order_id;
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData() {
      const res = await orderList({ order_id: this.order_id }, true);

      this.order = res.data.list[0];
      if(this.order.goods_list.length == 1) {
        this.type = 1
      }
    },
    pickerConfirm(e, item) {
      this.type = this.typeList[e[0]].id;
    },
    async submit() {
      switch (this.title) {
        case "订单尾款":
          await orderFinishpay(
            { order_id: this.order_id, fee: this.val },
            true
          );
          break;
        case "订单加钟":
          await orderAddTime(
            { type: this.type, order_id: this.order_id, val: this.val },
            true
          );
          break;
        default:
          return;
          break;
      }

      uni.showModal({
        title: "提示",
        content: "提交成功",
        showCancel: false,
        confirmText: "确定",
        confirmColor: "#3CC51F",
        success: (result) => {
          if (result.confirm) {
            this.$utils.goBack();
          }
        },
        fail: () => {},
        complete: () => {},
      });
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.price-color {
  color: #f0250e;
}
.font-del {
  text-decoration: line-through;
}
.border-b {
  border-bottom: 1px solid #f2f2f2;
}

.page-body {
  min-height: 100vh;
  background: #f2f2f2;
  padding: 24rpx;
  .page-item {
    margin-bottom: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 24rpx;
    .goods {
      .goods-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        background: #f2f2f2;
        margin-right: 20rpx;
      }

      .desc {
        font-size: 24rpx;
        display: inline-block;
        // background: #f2f2f2;
        // padding: 4rpx 12rpx;
        // border-radius: 6rpx;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .form-item {
      height: 100rpx;
    }
  }

  .submit {
    margin-top: 80rpx;
    width: 678rpx;
    height: 88rpx;
    background: #f0250e;
    border-radius: 120rpx 120rpx 120rpx 120rpx;
    color: #fff;
    font-weight: 600;
    font-size: 32rpx;

    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
